<template>
	<div>
		请选择学院
		<el-select v-model="valueCollege" placeholder="请选择学院">
			<el-option v-for="item in college" :key="item.college" :label="item.college" :value="item.college">
			</el-option>
		</el-select>
		<el-button type="primary" @click="onSubmit()">确定</el-button>
		<el-button type="success" @click="dialogFormVisible = true">增加</el-button>
		<div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column label="专业" width="180">
					<template slot-scope="scope">
						<el-popover trigger="hover" placement="top">
							<p>学院: {{ scope.row.college }}</p>
							<p>专业: {{ scope.row.major }}</p>
							<div slot="reference" class="name-wrapper">
								<el-tag size="medium">{{ scope.row.major }}</el-tag>
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog title="增加专业" :visible.sync="dialogFormVisible">
			<el-form :model="structre">
				<el-form-item label="学院名称" :label-width="formLabelWidth">
					<el-input v-model="structre.college" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="专业名称" :label-width="formLabelWidth">
					<el-input v-model="structre.major" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="add()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "Structure",
		data() {
			return {
				college: [],
				valueCollege: '',
				tableData: [],
				dialogTableVisible: false,
				dialogFormVisible: false,
				structre: {
					college: '',
					major: '',
				},
				formLabelWidth: '120px',
			}
		},
		methods: {
			onSubmit() {
				console.log(this.valueCollege);
				let structure = {
					college: this.valueCollege
				}
				this.$axios({
					method: 'post',
					url: "api/v1/structure/getMajor",
					data: structure,
				}).then(r => {
					if (r.data.code == 200) {
						this.tableData = r.data.data;
						console.log(r.data.data);
					}
				})
			},
			add() {
				this.$axios({
					method: 'post',
					url: "api/v1/structure/add",
					data: this.structre,
				}).then(r => {
					if (r.data.code == 200) {
						alert("增加成功")
					}
				})
			},
			getCollege() {
				this.$axios({
					method: 'post',
					url: "api/v1/structure/getCollege",
				}).then(r => {
					if (r.data.code == 200) {
						this.college = r.data.data;
						console.log(r.data.data);
					}
				})
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			}
		},
		created() {
			this.getCollege();
		}
	}
</script>

<style>
</style>
